<template>
  <div class="about-us-main">
    <div class="company-intruduction">
<!--      <p>
        <span class="title-h1">公司</span>
        <span class="title-h2">介绍</span>
        <span class="title-icon ml-4"></span>
      </p>
      <p class="title-en">Introduction</p> -->
	  <img
	    src="@/assets/image/contactUs/img／tab08／title／introduction@2x.png"
	    alt=""
		style="width: 184px;height:88px"
	  />
      <p class="introduction-disc mt-12">
        AISEOWORD是成都柳暗星河科技有限公司旗下品牌，主要提供内容生产、SEO定制、新闻稿发布、网站联运等服务.
      </p>
      <div class="our-task-img mt-40">
        <img
          src="https://oss-imag.aiseoword.com/aiseo-image/tabs1.png"
          alt=""
        />
        <img
          src="https://oss-imag.aiseoword.com/aiseo-image/tabs2.png"
          alt=""
        />
        <img
          src="https://oss-imag.aiseoword.com/aiseo-image/tabs3.png"
          alt=""
        />
      </div>
    </div>
    <div class="contact-us">
<!--      <p>
        <span class="title-h1">联系</span>
        <span class="title-h2">我们</span>
        <span class="title-icon ml-4"></span>
      </p>
      <p class="title-en">To Contact Us</p> -->
	  <img
	    src="@/assets/image/contactUs/img／tab08／title／contactus@2x.png"
	    alt=""
	  		style="width: 184px;height:88px"
	  />
      <p class="introduction-disc mt-12">
        我们的公司扎根于天府之国-成都，具备深厚的互联网实力，以及遍布全网全渠道的宣发资源。我们将以卓越的服务和创新思维，为您提供全方位的互联网解决方案，助力您的企业及产品在竞争激烈的市场中脱颖而出。
      </p>
      <div class="map-img mt-40" ref="aboutUsRef">
		  <img src="https://oss-imag.aiseoword.com/aiseo-image/img-homepage-bannerIsg.png" alt="" style="width: 100%;height: 100%;" />
	  </div>
    </div>
    <div class="join-us">
      <div
        class="join-us-item"
        @click="copyText(item.toastText, item.copyText)"
        v-for="(item, index) in joinUsArr"
        :key="index"
      >
      <img :src="item.src" alt="">
        <!-- <div class="item-title-info">
          <h3 class="item-title">{{ item.title }}</h3>
          <p class="item-title-en">{{ item.titleEn }}</p>
        </div>
        <div class="item-main item-contact-info" v-if="index === 0">
          <p class="contact-info-item">
            <img
              class="contact-icon"
              src="@/assets/image/contactUs/icon／tab08／contactUs／telephone@2x.png"
              alt=""
            />
            <span>电话 - 65221233</span>
          </p>
          <p class="contact-info-item">
            <img
              class="contact-icon"
              src="@/assets/image/contactUs/icon／tab08／contactUs／mail@2x.png"
              alt=""
            />
            <span>邮编 - 610095</span>
          </p>
          <p class="contact-info-item">
            <img
              class="contact-icon"
              src="@/assets/image/contactUs/icon／tab08／contactUs／location@2x.png"
              alt=""
            />
            <span>地址 - 成都市高新区天目中心</span>
          </p>
        </div>
        <div class="item-main erweima-contact" v-else-if="index === 1">
          <img
            class="erweima-img"
            src="@/assets/image/contactUs/img／tab08／contactUs／wcCode／business@2x.png"
            alt=""
          />
          <p class="erweima-text">
            招聘咨询请用微信扫描左侧二维码; 求职请发送简历至下方邮箱地址.
          </p>
        </div>
        <div class="item-main erweima-contact" v-else>
          <img
            class="erweima-img"
            src="@/assets/image/contactUs/img／tab08／contactUs／wcCode／business@2x.png"
            alt=""
          />
          <p class="erweima-text">
            使用微信扫码即可联系到我们; 或着您可以通过下方邮箱地址发送邮件.
          </p>
        </div> -->

        <!-- <p class="item-disc">"{{ item.disc }}"</p> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import EventBus from "@/utils/eventBus.js";
import item1 from '@/assets/image/contactUs/item1.png';
import item2 from '@/assets/image/contactUs/item2.png';
import item3 from '@/assets/image/contactUs/item3.png';

const currentCopy = ref("");
const joinUsArr = [
  {
    title: "成都总部",
    titleEn: "Sichuan, Chengdu",
    disc: "AISEO - 打造世界一流的网推平台",
    copyText: '65221233',
    toastText: "已复制电话号码到剪贴板！",
    src:item1
  },
  {
    title: "加入我们",
    titleEn: "Join our team!",
    disc: "招聘 - laxhzhaopin@gmail.com",
    copyText: "laxhzhaopin@gmail.com",
    toastText: "已复制招聘邮箱地址到剪贴板！",
    src:item2
  },
  {
    title: "商务合作",
    titleEn: "Business Affair",
    disc: "商务 - liuanxinghe@gmail.com",
    copyText: "liuanxinghe@gmail.com",
    toastText: "已复制商务合作邮箱地址到剪贴板！",
    src:item3
  },
];
const aboutUsRef = ref();
const copyText = (toastText, text) => {
  EventBus.emit('openToastBox', [toastText, text])
}
onMounted(() => {
  EventBus.on("aboutUsScrollTo", () => {
    const element = document.getElementById("app");
    element.scrollTo({
      top: aboutUsRef.value.offsetTop,
      behavior: "smooth",
    });
  });
});
onUnmounted(() => {
  EventBus.off("aboutUsScrollTo");
});
</script>

<style lang="scss" scoped>
.about-us-main {
  width: $aiseoHomeWidth;
  margin: 0 auto;
  margin-top: 120px;
  p {
    .title-h1 {
      font-family: HelloFont WenYiHei, HelloFont WenYiHei;
      font-weight: 400;
      font-size: 48px;
      color: #1a1a1a;
    }
    .title-h2 {
      font-family: HelloFont WenYiHei, HelloFont WenYiHei;
      font-weight: 400;
      font-size: 32px;
      color: #1a1a1a;
    }
    .title-icon {
      display: inline-block;
      width: 16px;
      height: 4px;
      background: #e62e3d;
      border-radius: 0px 0px 0px 0px;
    }
  }
  .title-en {
    font-family: Poiret One;
    font-weight: 400;
    font-size: 24px;
    color: #1a1a1a;
  }
  .company-intruduction {
    width: 100%;
  }
  .introduction-disc {
    font-family: Alibaba PuHuiTi-Regular;
    font-weight: 400;
    font-size: 20px;
    color: #808080;
    line-height: 36px;
    letter-spacing: 0.5px;
  }
  .our-task-img {
    width: 100%;
    display: flex;
    justify-content: space-between;
    img {
      width: 380px;
      height: 495px;
      background: #ebebeb;
      border-radius: 24px 24px 24px 24px;
    }
  }
  .contact-us {
    width: 100%;
    margin-top: 120px;
    .map-img {
      width: 100%;
      height: 800px;
      border-radius: 12px 12px 12px 12px;
    }
  }
  .join-us {
    margin-top: 80px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    &-item {
      width: 380px;
      height: 380px;
      background: #ebebeb;
      border-radius: 24px 24px 24px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      >img{
        width: 100%;
        height: 100%;
        border-radius: 24px;
      }
      &:hover {
        background: #ffffff;
		// border: 2px solid #FF5369;
    img{
      box-shadow: inset 0px 0px 0px 2px #FF5369;
    }
        box-shadow: 1px 3px 20px 0px rgba(230, 46, 61, 0.12);
        .erweima-text{
          letter-spacing: 0.6px;
        }
      }
      // &::after {
      //   content: "";
      //   display: inline-block;
      //   width: 60px;
      //   height: 60px;
      //   background: url(@/assets/image/contactUs/icon／tab08／contactUs／star@2x.png);
      //   background-size: cover;
      //   position: absolute;
      //   right: 20px;
      //   top: 40px;
      // }
      // .item-title {
      //   font-family: Alibaba PuHuiTi-Bold;
      //   font-weight: bold;
      //   font-size: 32px;
      //   color: #1a1a1a;
      // }
      // .item-contact-info{
      //   transform: translateX(-2px);
      // }
      // .item-main {
      //   letter-spacing: 2px;
      //   .contact-info-item {
      //     font-weight: 500;
      //     font-size: 16px;
      //     color: #333333;
      //     display: flex;
      //     align-items: center;
      //     .contact-icon {
      //       width: 24px;
      //       height: 24px;
      //     }
      //     & + .contact-info-item {
      //       margin-top: 14px;
      //     }
      //     img{
      //       margin-right: 4px;
      //     }
      //   }
      // }
      // .erweima-contact {
      //   display: flex;
      //   align-items: flex-end;
      //   .erweima-img {
      //     width: 150px;
      //     height: 150px;
      //   }
      //   .erweima-text {
      //     width: 133px;
      //     margin-left: 16px;
      //     font-weight: 500;
      //     font-size: 16px;
      //     color: #333333;
      //     line-height: 32px;
      //     letter-spacing: 0.6px;
      //   }
      // }
      // .item-title-en {
      //   font-family: Poiret One, Poiret One;
      //   font-weight: 400;
      //   font-size: 20px;
      //   color: #1a1a1a;
      // }
      // .item-disc {
      //   font-family: Alibaba PuHuiTi-Medium;
      //   font-weight: 500;
      //   font-size: 18px;
      //   color: #1a1a1a;
      // }
    }
  }
}
</style>
